<!-- 用户资料页 -->
<template>
	<view class="uni-content">
		<view class="avatar">
			<a-avatar width="260rpx" height="260rpx"></a-avatar>
		</view>
		<uni-list>
			<uni-list-item class="item" @click="dialogRef.open()" title="昵称" :rightText="user.userInfo.nickname||'未设置'"
				link>
			</uni-list-item>
			<uni-list-item class="item" @click="bindMobile" title="手机号" :rightText="user.userInfo.mobile||'未绑定'" link>
			</uni-list-item>
			<uni-list-item v-if="user.userInfo.email" class="item" title="电子邮箱" :rightText="user.userInfo.email">
			</uni-list-item>
			<!-- #ifdef APP -->
			<!-- 如未开通实人认证服务，可以将实名认证入口注释 -->
			<uni-list-item class="item" @click="realNameVerify" title="实名认证"
				:rightText="realNameStatus !== 2 ? '未认证': '已认证'" link>
			</uni-list-item>
			<!-- #endif -->
			<uni-list-item v-if="hasPwd" class="item" @click="changePassword" title="修改密码" link>
			</uni-list-item>
		</uni-list>
		<!-- #ifndef MP -->
<!-- 		<uni-list class="mt10">
			<uni-list-item @click="deactivate" title="注销账号" link="navigateTo"></uni-list-item>
		</uni-list> -->
		<!-- #endif -->
		<uni-popup ref="dialogRef" type="dialog">
			<uni-popup-dialog mode="input" :value="user.userInfo.nickname" @confirm="setNickname"
				:inputType="setNicknameIng?'nickname':'text'" title="设置昵称" placeholder="请输入要设置的昵称">
			</uni-popup-dialog>
		</uni-popup>
		<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
		<template v-if="showLoginManage">
			<button v-if="userInfo._id" @click="logout">退出登录</button>
			<button v-else @click="login">去登录</button>
		</template>
	</view>
</template>

<script setup>
	import { onShow, onReady } from '@dcloudio/uni-app';
	import { ref, reactive, computed } from 'vue';
	import use_user from "@/stores/use_user.js"
	const user = use_user()
	// 定义响应式数据
	const univerifyStyle = ref({
		authButton: {
			title: "本机号码一键绑定",
		},
		otherLoginButton: {
			title: "其他号码绑定",
		},
	});
	const dialogRef = ref();
	const hasPwd = ref(false);
	const showLoginManage = ref(false);
	const setNicknameIng = ref(false);

	// 计算属性
	const realNameStatus = computed(() => {
		return 0;
	});

	// onShow 生命周期钩子
	onShow(async () => {
		univerifyStyle.value.authButton.title = "本机号码一键绑定";
		univerifyStyle.value.otherLoginButton.title = "其他号码绑定";
	});

	const bindMobileSuccess = () => {
		// mutations.updateUserInfo();
	};

	const changePassword = () => {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd',
			complete: (e) => {
				// console.log(e);
			},
		});
	};

	const bindMobile = () => {
		uni.showToast({
			icon: 'none',
			title: '暂时不能修改😊',
		})
	};

	const univerify = () => {

	};

	const bindMobileBySmsCode = () => {
		uni.navigateTo({
			url: './bind-mobile/bind-mobile',
		});
	};

	const setNickname = (nickname) => {
		console.log('nickname: ', nickname);
		if (nickname) {
			user.userInfo.nickname = nickname
			setNicknameIng.value = false;

		}
		// if (nickname) {
		// 	mutations.updateUserInfo({ nickname });
		// 	setNicknameIng.value = false;
		// 	const dialogRef = $refs.dialog;
		// 	if (dialogRef) {
		// 		dialogRef.close();
		// 	}
		// } else {
		// 	const dialogRef = $refs.dialog;
		// 	if (dialogRef) {
		// 		dialogRef.open();
		// 	}
		// }
	};

	const deactivate = () => {
		uni.navigateTo({
			url: "/uni_modules/uni-id-pages/pages/userinfo/deactivate/deactivate",
		});
	};

	const bindThirdAccount = async (provider) => {

	};

	const realNameVerify = () => {
		uni.navigateTo({
			url: "/uni_modules/uni-id-pages/pages/userinfo/realname-verify/realname-verify",
		});
	};
</script>

<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	.uni-content {
		padding: 0;
	}

	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 0;
			max-width: 690px;
			margin-left: calc(50% - 345px);
			border: none;
			max-height: none;
			border-radius: 0;
			box-shadow: none;
		}
	}

	/* #endif */
	.avatar {
		align-items: center;
		justify-content: center;
		margin: 22px 0;
		width: 100%;
	}

	.item {
		flex: 1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	button {
		margin: 10%;
		margin-top: 40px;
		border-radius: 0;
		background-color: #FFFFFF;
		width: 80%;
	}

	.mt10 {
		margin-top: 10px;
	}
</style>